<div id="oni-carousel"
	 class="oni-carousel" 
	 ms-css-width="pictureWidth" 
	 ms-css-height="pictureHeight"
	 ms-mouseenter="stopPlay" 
	 ms-mouseleave="restartPlay('carousel')"
	 >
	<div class="oni-carousel-panel"
		 ms-css-width="pictureWidth* picNum" 
		 ms-css-left="panelOffsetX" 
		 ms-css-position="panelPosition"
		 >
		<div class="oni-carousel-item" 
			 ms-repeat="pictures"
			 ms-css-width="pictureWidth"
			 ms-css-position="itemPosition"
			 ms-css-opacity="getOpacity($index)"
			 >
			<img ms-src="{%el%}" alt=""/>
		</div>
	</div>
	<div class="oni-carousel-selection-wrap" 
		 ms-visible="alwaysShowSelection"
		 ms-css-margin-left="selectionWrapOffset"
		 >
		<a ms-class="selected:el==currentIndex" 
		 ms-mouseenter="selectPic($index,$event)"
		 ms-click="selectPic($index,$event)"
		 ms-mouseleave="restartPlay('tab')"
		 ms-repeat="selections"
			></a>
	</div>
	<a ms-class="{%arrowLeftClass%}" class="arrow prev png24" 
		ms-click="animate(-1)"
		ms-mouseenter="arrowHover('left')"
		ms-mouseleave="arrowBlur('left')"
		ms-visible="arrowVisible"
		ms-css-background-image="arrowLeftBg"
	>
	</a>
	<a ms-class="{%arrowRightClass%}" class="arrow after png24" 
		ms-click="animate(1)"
		ms-mouseenter="arrowHover('right')"
		ms-mouseleave="arrowBlur('right')"
		ms-visible="arrowVisible"
		ms-css-background-image="arrowRightBg"
	>
	</a>
</div>
